<template>
  <div class="warning_list_wrap" style="height: 100%;width:100%">
    <!--  <h3 class="title">
      <span class="back" @click="back"></span>预警列表
    </h3> -->
    <div class="wrapper">
      <div class="mask" v-show="searchState"></div>
      <div class="searchbox">
        <div class="screening" @click="sx_event">筛选</div>
        <span @click="searchList">搜索</span>
        <div class="screening_wrap" v-show="searchState">
          <p>预警类型</p>
          <ul class="clearfix">
            <li :class="[outHouseGas ? 'on' : '']" @click="warnConClick(1)">户外燃气泄漏预警</li>
            <li :class="[outHouseMash ? 'on' : '']" @click="warnConClick(2)">户外沼气预警</li>
            <li :class="[inHouseGas ? 'on' : '']" @click="warnConClick(3)">户内燃气泄漏预警</li>
          </ul>
          <p>处置状态</p>
          <ul class="clearfix">
            <li :class="[noDeal ? 'on' : '']" @click="dealConClick(1)">未处置</li>
            <li :class="[inDeal ? 'on' : '']" @click="dealConClick(2)">处置中</li>
            <li :class="[hasDeal ? 'on' : '']" @click="dealConClick(3)">已处置</li>
          </ul>
          <div class="d_btn">
            <span @click="resetCon">重置</span>
            <span style="color:#428ee3" @click="sxDetermine">确定</span>
          </div>
        </div>
      </div>
      <div class="warn_list_box">
        <p class="record">共{{ recordCount }}条记录</p>
        <div class="infinite-list-wrapper" style="overflow:auto">
          <ul class="warning_infor">
            <li class="notdisposal" v-infinite-scroll="load" infinite-scroll-disabled="disabled"
              @click="warningDetails(1, item.alarmId,item.readstatus)" v-for="(item,index) in alarmDataLs" :key="index">
              <h5>
                <span class="warn_icon">
                  <span class="dot" v-if="item.dealType!='3'&& status!='4'&& item.readstatus=='0'"></span>
                  <!-- <span v-if="isRead(item)" class="dot"></span> -->
                </span>
                {{ item.alarmName }}
              </h5>
              <button v-if="status!='4'" :class="[
                  'disposal_status',
                  item.dealType == 1 ? 'notdisposal' : '',
                  item.dealType == 2 ? 'disposaling' : '',
                  item.dealType == 3 ? 'hasdisposal' : ''
                ]">{{ getDealTxt(item.dealType) }}</button>
              <table>
                <tr>
                  <td class="lable_td" width="100px">最新报警时间</td>
                  <td>{{ item.monitortime }}</td>
                </tr>
                <tr>
                  <td class="lable_td">具体位置</td>
                  <td>{{ item.address }}</td>
                </tr>
              </table>
            </li>
          </ul>
          <p v-if="loading" style="text-align: center;">加载中...</p>
          <p v-if="noMore" style="text-align: center;">没有更多了</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "warnlist",
    data() {
      return {
        status: "",
        searchState: false,
        alarmDataLs: [],
        pageNumVar: 1,
        pageSizeVar: 10,
        isLoadMore: false,
        outHouseGas: true,
        outHouseMash: true,
        inHouseGas: true,
        hasDeal: true,
        inDeal: true,
        noDeal: true,
        dealTypeParam: ["1", "2", "3"],
        searchKeyParam: ["1", "2", "3"],
        recordCount: 0,
        hasMore: true,
        loading: false
      };
    },
    methods: {
      back() {
        this.$router.go(-1);
      },
      sx_event() {
        this.searchState = !this.searchState;
      },
      sxDetermine() {
        this.searchState = false;
        this.getWarnList();
      },
      warningDetails(id, alId, readstatus) {


        //需求请求接口代表已经阅读过了
        if (this.status!='4'&&readstatus == '0') {
          var param = {
            userName: this.$store.state.userInfo.loginName,
            userId: this.$store.state.userInfo.id,
            alarmId: alId,
          };
          this.$api.reqApi.stateChange(param);

        }

        var _this = this
        this.$router.push({
          name: "mapdistribution",
          query: {
            userId: id,
            alarmId: alId,
            type: _this.$route.query.type
          }
        });

      },
      // 搜索
      searchList() {
        this.$router.push({
          name: "searchList",
          query: {
            status: this.status,
            dealTypeParam:this.dealTypeParam,
            searchKeyParam: this.searchKeyParam,
          }
        });
      },
      getWarnList() {
        var param = {
          dealType: this.dealTypeParam,
          pageNum: this.pageNumVar,
          pageSize: this.pageSizeVar,
          searchKey: this.searchKeyParam,
          userName: this.$store.state.userInfo.loginName,
          searchCondition: "",
        };
        if (this.status != "4") {
          this.$api.reqApi.alarmList(param).then(res => {
            if (res.code === "200") {
              console.log(res);
              this.recordCount = res.data.count;
              if (!this.isLoadMore) {
                this.alarmDataLs = res.data.details;
              } else {
                var tempArray = new Array();
                tempArray = tempArray.concat(this.alarmDataLs);
                this.alarmDataLs = tempArray.concat(res.data.details);
              }
              this.hasMore = res.data.details.length == this.pageSizeVar;
              console.log(
                "alarmDataLs.length=" +
                this.alarmDataLs.length +
                "hasmore=" +
                this.hasMore
              );
              // this.alarmDataLs = this.alarmDataLs.concat(res.data.details);
              // this.alarmDataLs = this.alarmDataLs.concat(res.data.details);
            } else {
              this.recordCount = 0;
            }
          });
        } else {
          this.$api.reqApi.alarmHistoryList(param).then(res => {
            if (res.code === "200") {
              this.recordCount = res.data.count;
              if (!this.isLoadMore) {
                this.alarmDataLs = res.data.details;
              } else {
                var tempArray = new Array();
                tempArray = tempArray.concat(this.alarmDataLs);
                this.alarmDataLs = tempArray.concat(res.data.details);
              }
              this.hasMore = res.data.details.length == this.pageSizeVar;
            } else {
              this.recordCount = 0;
            }
          });
        }


      },
      getDealTxt(value) {
        var text = "已处置";
        switch (value) {
          case 1:
            text = "未处置";
            break;
          case 2:
            text = "处置中";
            break;
          case 3:
            text = "已处置";
            break;
        }
        return text;
      },
      warnConClick(type) {
        switch (type) {
          case 1:
            this.outHouseGas = !this.outHouseGas;
            this.searchKeyParam[type - 1] = this.outHouseGas ? "1" : "";
            break;
          case 2:
            this.outHouseMash = !this.outHouseMash;
            this.searchKeyParam[type - 1] = this.outHouseMash ? "2" : "";
            break;
          case 3:
            this.inHouseGas = !this.inHouseGas;
            this.searchKeyParam[type - 1] = this.inHouseGas ? "3" : "";
            break;
        }
      },
      dealConClick(type) {
        switch (type) {
          case 1:
            this.noDeal = !this.noDeal;
            this.dealTypeParam[type - 1] = this.noDeal ? "1" : "";
            break;
          case 2:
            this.inDeal = !this.inDeal;
            this.dealTypeParam[type - 1] = this.inDeal ? "2" : "";
            break;
          case 3:
            this.hasDeal = !this.hasDeal;
            this.dealTypeParam[type - 1] = this.hasDeal ? "3" : "";
            break;
        }
      },
      resetCon() {
        this.outHouseGas = true;
        this.outHouseMash = true;
        this.inHouseGas = true;
        this.noDeal = true;
        this.inDeal = true;
        this.hasDeal = true;
      },
      load() {
        this.loading = true;
        this.pageNumVar++;
        this.isLoadMore = true;
        setTimeout(() => {
          this.getWarnList();
          this.loading = false;
        }, 2000);
      },
      chooseOne(type) {
        switch (type) {
          case 0:
            this.noDeal = true;
            this.inDeal = true;
            this.hasDeal = true;
            this.dealTypeParam[0] = "1";
            this.dealTypeParam[1] = "2";
            this.dealTypeParam[2] = "3";
            break;
          case 1:
            this.noDeal = true;
            this.inDeal = false;
            this.hasDeal = false;
            this.dealTypeParam[0] = "1";
            this.dealTypeParam[1] = "";
            this.dealTypeParam[2] = "";
            break;
          case 2:
            this.noDeal = false;
            this.inDeal = true;
            this.hasDeal = false;
            this.dealTypeParam[0] = "";
            this.dealTypeParam[1] = "2";
            this.dealTypeParam[2] = "";
            break;
          case 3:
            this.noDeal = false;
            this.inDeal = false;
            this.hasDeal = true;
            this.dealTypeParam[0] = "";
            this.dealTypeParam[1] = "";
            this.dealTypeParam[2] = "3";
            break;
        }
      },
      chooseType(type) {
        switch (type) {
          case "整体情况":
            this.searchKeyParam[0] = "1";
            this.searchKeyParam[1] = "2";
            this.searchKeyParam[2] = "3";
            this.outHouseGas = true;
            this.outHouseMash = true;
            this.inHouseGas = true;
            break;
          case "户外燃气泄漏预警":
            this.searchKeyParam[0] = "1";
            this.searchKeyParam[1] = "";
            this.searchKeyParam[2] = "";
            this.outHouseGas = true;
            this.outHouseMash = false;
            this.inHouseGas = false;
            break;
          case "户外沼气预警":
            this.searchKeyParam[0] = "";
            this.searchKeyParam[1] = "2";
            this.searchKeyParam[2] = "";
            this.outHouseGas = false;
            this.outHouseMash = true;
            this.inHouseGas = false;
            break;
          case "户内燃气泄漏预警":
            this.searchKeyParam[0] = "";
            this.searchKeyParam[1] = "";
            this.searchKeyParam[2] = "3";
            this.outHouseGas = false;
            this.outHouseMash = false;
            this.inHouseGas = true;
            break;
        }
      }
    },
    mounted() {
      let _this = this;
      this.status = _this.$route.query.status
      this.chooseOne(parseInt(this.status))
      var type = _this.$route.query.type
      this.chooseType(type)
      window["dsBridge"].register("GoBack", function () {
        _this.$router.go(-1);
      });
      window["dsBridge"].register("whetherHtml", function (ret) {
        console.log("=======ret:" + ret);
        return true;
      });
      _this.getWarnList();
    },
    computed: {
      noMore() {
        return !this.hasMore;
      },
      disabled() {
        return this.loading || !this.hasMore;
      },
      isRead: function () {
        return function (item) {
          var locatype = false
          if (item.locatype == "0") {
            locatype = true
          } else {
            locatype = false
          }
          return locatype
        }
      }
    }
  };
</script>

<style scoped lang="stylus">
  _colorbg(color, bg) {
    color: color;
    background: bg;
  }

  .wrapper {
    background: #f5f6fa;
    display: flex;
    flex-direction: column;
    top: 0;
    overflow: scroll;
    position: absolute;
    bottom: 0;
    width: 100%;
    flex: 1;
  }

  .searchbox {
    height: 0.73rem;
    line-height: 0.73rem;
    background: #fff;
    position: relative;

    .screening {
      float: left;
      padding-left: 0.3rem;
      padding-right: 0.3rem;
      background: url('../assets/images/icon_arrow.png') no-repeat center right;
      background-size: 0.16rem;
    }

    span {
      float: right;
      width: 1rem;
      text-align: center;
    }
  }

  .screening_wrap {
    position: absolute;
    width: 100%;
    top: 0.73rem;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    padding-left: 0.3rem;
    z-index: 2;

    p {
      font-size: 0.24rem;
      color: #979ea0;
    }

    li {
      float: left;
      height: 0.62rem;
      line-height: 0.62rem;
      padding: 0 0.34rem;
      background: #f1f1f1;
      margin-right: 0.2rem;
      border-radius: 5px;
      margin-bottom: 0.25rem;

      &.on {
        background: #428ee4;
        color: #fff;
      }
    }

    .d_btn {
      height: 1.02rem;
      border-top: #dde0e4 1px solid;
      position: relative;
      display: flex;
      flex-direction: row;

      &::before {
        content: '';
        width: 1px;
        height: 100%;
        top: 0;
        left: 49%;
        background: #dde0e4;
        position: absolute;
      }

      span {
        flex: 1;
        line-height: 1.02rem;
        font-size: 0.36rem;
      }
    }
  }

  .dot {
    width: 0.17rem;
    height: 0.17rem;
    position: absolute;
    background: #ff3f47;
    top: -0.06rem;
    right: -0.06rem;
    border-radius: 50%;
    border: #fff 0.02rem solid;
  }

  .warn_list_box {
    background: #f5f6fa;
    width: 100%;
    height: 100%;

    .record {
      height: 0.7rem;
      line-height: 0.7rem;
      text-align: center;
      color: #989da0;
    }
  }

  .warning_infor {
    height: fit-content;

    li {
      height: fit-content;
      background: #fff;
      box-shadow: 0 7px 10px 0px rgba(157, 168, 177, 0.3);
      margin-bottom: 0.3rem;
      border-radius: 7px;
      padding: 0.3rem;
      box-sizing: border-box;
      position: relative;

      h5 {
        font-size: 0.3rem;
        color: #2a2c32;
        width 85%;

        .warn_icon {
          width: 0.5rem;
          height: 0.5rem;
          background: url('../assets/images/warning_icon1.png');
          background-size: contain;
          margin-right: 0.15rem;
          display: block;
          float: left;
          position: relative;
        }
      }
    }

    .disposal_status {
      width: 1.05rem;
      height: 0.4rem;
      position: absolute;
      right: 0.2rem;
      top: 0.42rem;
      border: 0;
      font-size: 0.24rem;
      border-radius: 8px 0 8px 0;
    }

    table {
      margin-top: 0.18rem;
    }

    table td {
      padding: 5px 10px 5px 0;
    }

    .lable_td {
      color: #666;
    }
  }

  button.notdisposal {
    // 未处置
    _colorbg(#e8555b, rgba(232, 86, 90, 0.1));
  }

  .disposaling {
    // 处置中
    _colorbg(#faa762, rgba(250, 167, 98, 0.1));
  }

  .hasdisposal {
    // 已处置
    _colorbg(#81c26b, rgba(129, 194, 107, 0.1));
  }

  .easy_refresh {
    width: 100%;
    height: 100%;
    margin-bottom: 1px;
    margin-top: 0px;
  }
</style>